<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Chat view</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Chat view</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <strong>Chat room </strong> can be used to create chat room in your app.
                    You can also use a small chat in the right corner to provide live discussion.

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">

            <div class="ibox chat-view">

                <div class="ibox-title">
                    <small class="pull-right text-muted">Last message:  Mon Jan 26 2015 - 18:39:23</small>
                    Chat room panel
                </div>

                <div class="ibox-content">

                    <div class="row">

                        <div class="col-md-9 ">
                            <div class="chat-discussion">

                                <div class="chat-message left">
                                    <img class="message-avatar" src="img/a1.jpg" alt="" >
                                    <div class="message">
                                        <a class="message-author" href="#"> Michael Smith </a>
                                        <span class="message-date"> Mon Jan 26 2015 - 18:39:23 </span>
                                            <span class="message-content">
											Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                                            </span>
                                    </div>
                                </div>
                                <div class="chat-message right">
                                    <img class="message-avatar" src="img/a4.jpg" alt="" >
                                    <div class="message">
                                        <a class="message-author" href="#"> Karl Jordan </a>
                                        <span class="message-date">  Fri Jan 25 2015 - 11:12:36 </span>
                                            <span class="message-content">
											Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover.
                                            </span>
                                    </div>
                                </div>
                                <div class="chat-message left">
                                    <img class="message-avatar" src="img/a2.jpg" alt="" >
                                    <div class="message">
                                        <a class="message-author" href="#"> Michael Smith </a>
                                        <span class="message-date">  Fri Jan 25 2015 - 11:12:36 </span>
                                            <span class="message-content">
											There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
                                            </span>
                                    </div>
                                </div>
                                <div class="chat-message right">
                                    <img class="message-avatar" src="img/a5.jpg" alt="" >
                                    <div class="message">
                                        <a class="message-author" href="#"> Alice Jordan </a>
                                        <span class="message-date">  Fri Jan 25 2015 - 11:12:36 </span>
                                            <span class="message-content">
											All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
                                                It uses a dictionary of over 200 Latin words.
                                            </span>
                                    </div>
                                </div>
                                <div class="chat-message left">
                                    <img class="message-avatar" src="img/a6.jpg" alt="" >
                                    <div class="message">
                                        <a class="message-author" href="#"> Mark Smith </a>
                                        <span class="message-date">  Fri Jan 25 2015 - 11:12:36 </span>
                                            <span class="message-content">
											All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
                                                It uses a dictionary of over 200 Latin words.
                                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="chat-users">

                                <div class="users-list">
                                    <div class="chat-user">
                                        <img class="chat-avatar" src="img/a4.jpg" alt="" >
                                        <div class="chat-user-name">
                                            <a href="#">Karl Jordan</a>
                                        </div>
                                    </div>
                                    <div class="chat-user">
                                        <img class="chat-avatar" src="img/a1.jpg" alt="" >
                                        <div class="chat-user-name">
                                            <a href="#">Monica Smith</a>
                                        </div>
                                    </div>
                                    <div class="chat-user">
                                        <span class="pull-right label label-primary">Online</span>
                                        <img class="chat-avatar" src="img/a2.jpg" alt="" >
                                        <div class="chat-user-name">
                                            <a href="#">Michael Smith</a>
                                        </div>
                                    </div>
                                    <div class="chat-user">
                                        <span class="pull-right label label-primary">Online</span>
                                        <img class="chat-avatar" src="img/a3.jpg" alt="" >
                                        <div class="chat-user-name">
                                            <a href="#">Janet Smith</a>
                                        </div>
                                    </div>
                                    <div class="chat-user">
                                        <img class="chat-avatar" src="img/a5.jpg" alt="" >
                                        <div class="chat-user-name">
                                            <a href="#">Alice Smith</a>
                                        </div>
                                    </div>
                                    <div class="chat-user">
                                        <img class="chat-avatar" src="img/a6.jpg" alt="" >
                                        <div class="chat-user-name">
                                            <a href="#">Monica Cale</a>
                                        </div>
                                    </div>
                                    <div class="chat-user">
                                        <img class="chat-avatar" src="img/a2.jpg" alt="" >
                                        <div class="chat-user-name">
                                            <a href="#">Mark Jordan</a>
                                        </div>
                                    </div>
                                    <div class="chat-user">
                                        <span class="pull-right label label-primary">Online</span>
                                        <img class="chat-avatar" src="img/a3.jpg" alt="" >
                                        <div class="chat-user-name">
                                            <a href="#">Janet Smith</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="chat-message-form">

                                <div class="form-group">

                                    <textarea class="form-control message-input" name="message" placeholder="Enter message text"></textarea>
                                </div>

                            </div>
                        </div>
                    </div>


                </div>

            </div>
        </div>

    </div>


</div>

<div class="small-chat-box ng-small-chat fadeInRight animated" ng-show="openChat">

    <div class="heading" draggable="true">
        <small class="chat-date pull-right">
            02.19.2015
        </small>
        Small chat
    </div>

    <div class="content" chat-slim-scroll>

        <div class="left">
            <div class="author-name">
                Monica Jackson <small class="chat-date">
                10:02 am
            </small>
            </div>
            <div class="chat-message active">
                Lorem Ipsum is simply dummy text input.
            </div>

        </div>
        <div class="right">
            <div class="author-name">
                Mick Smith
                <small class="chat-date">
                    11:24 am
                </small>
            </div>
            <div class="chat-message">
                Lorem Ipsum is simpl.
            </div>
        </div>
        <div class="left">
            <div class="author-name">
                Alice Novak
                <small class="chat-date">
                    08:45 pm
                </small>
            </div>
            <div class="chat-message active">
                Check this stock char.
            </div>
        </div>
        <div class="right">
            <div class="author-name">
                Anna Lamson
                <small class="chat-date">
                    11:24 am
                </small>
            </div>
            <div class="chat-message">
                The standard chunk of Lorem Ipsum
            </div>
        </div>
        <div class="left">
            <div class="author-name">
                Mick Lane
                <small class="chat-date">
                    08:45 pm
                </small>
            </div>
            <div class="chat-message active">
                I belive that. Lorem Ipsum is simply dummy text.
            </div>
        </div>


    </div>
    <div class="form-chat">
        <div class="input-group input-group-sm"><input type="text" class="form-control"> <span class="input-group-btn"> <button
                class="btn btn-primary" type="button">Send
        </button> </span></div>
    </div>

</div>
<div id="small-chat" ng-click="openChat = !openChat">

    <span class="badge badge-warning pull-right">5</span>
    <a class="open-small-chat">
        <i class="fa fa-comments"></i>

    </a>
</div>